<template>
	<view class="container">
		<view class="postx" :style="scrollTop>0?'background:#FFF;':''">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view class="flexJusp" style="font-size: 36rpx;font-weight: bold;text-align: center;padding:0 20rpx;"
				:style="'height:'+navigationBarHeight+'px;line-height:'+navigationBarHeight+'px'">
				<view style="width:50rpx;" @click="back">
					<image style="width:20rpx;height:34rpx;" src="/static/image/mv_tuichu.png"></image>
				</view>
				<view>实名认证</view>
				<view style="width:50rpx;"></view>
			</view>
		</view>
		<view style="width: 750rpx;height: 650rpx;background: linear-gradient(228deg,#CCEAFF,#F9FBFC);">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view :style="'height:'+navigationBarHeight+'px'"></view>
			<view style="color: #000;">
			</view>
			<view
				style="width: 670rpx;height: 224rpx;background: #FFFFFF;border-radius: 28rpx;padding:20rpx;margin:36rpx 20rpx 24rpx;padding-bottom: 120px;">
				<view style="display: flex;justify-content: center;align-items: center;;">
					<image style="width: 200rpx;height: 185rpx;border-radius:50%;"
						src="/static/certification.png"></image>
				</view>
				<view class="flexJusp" style="line-height:112rpx;border-bottom: 2rpx solid #F0F0F0;padding:0 20rpx;">
					<view>真实姓名</view>
					<input v-model="name" style="margin-top:36rpx;text-align: right;font-size:28rpx;height:40rpx;"
						placeholder-style="color: #999999;" placeholder="请输入真实姓名" />
				</view>
				<view class="flexJusp" style="line-height:112rpx;border-bottom: 0rpx solid #F0F0F0;padding:0 20rpx;">
					<view>身份证号</view>
					<input maxlength="18" v-model="mobile" type="number"
						style="margin-top:34rpx;text-align: right;font-size:28rpx;height:40rpx;"
						placeholder-style="color: #999999;" placeholder="请输入身份证号" />
				</view>

			</view>
			<view
				style="width: 670rpx;height: 466rpx;background: #FFFFFF;border-radius: 28rpx;padding:20rpx;margin:0 auto 36rpx;padding-bottom: 100px;">
				<view style="font-size: 30rpx;font-weight: bold;margin-bottom: 30rpx;">上传身份证</view>
				<view style="text-align: center;">
					<image @click="upImage" style="width:372rpx;height:236rpx;border-radius:10rpx;"
						:src="images ||this.$loadImage('cardZheng')"></image>
					<view style="font-size: 24rpx;color: #666666;margin-bottom:28rpx;">（上传人像面）</view>
					<image @click="upImages" style="width:372rpx;height:236rpx;border-radius:10rpx;"
						:src="imagex ||this.$loadImage('cardFan')"></image>
					<view style="font-size: 24rpx;color: #666666;">（上传国徽面）</view>
				</view>

			</view>
			<view class="buttons" @click="submitRealNameAuth">确定提交</view>
			<view style="height:20rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		systemInfo
	} from '@/https/mixin.js'
	export default {
		mixins: [systemInfo],
		data() {
			return {
				images: '',
				imagex: '',
				price: '',
				scrollTop: 0,
				money: 0,
				bank: '',
				bankid: '',
				name: '',
				mobile: '',
				phone: '',
				rate: 0,
				content: '',
			}
		},
		onLoad() {
			this.getSystemInfo()
			this.loads()
		},
		onPageScroll(event) {
			const scrollTop = event.scrollTop // 获取当前页面滚动高度
			this.scrollTop = event.scrollTop
		},
		methods: {
			backs() {
				uni.navigateBack()
			},
			/* 						upImage() {
										var that = this
										uni.chooseImage({
											count: 1, //默认9
											sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
											sourceType: ['album', 'camera'], //从相册选择
											success: function(res) {
												that.images = res.tempFilePaths[0]
												// that.$upShop('common/upload',res.tempFilePaths[0]).then(rex => {
												// 	let arr = JSON.parse(rex.data)
												// 	that.user.avatar = arr.data.url
												// }).catch((e) => {
												// });
											}
										})
									}, */
			upImage(index) {
				if (this.disableChange) {
					uni.showToast({
						title: '不能更改图片',
						icon: 'none',
						duration: 2000
					});
					return
				}
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$upShop('upload', res.tempFilePaths[i]).then(rex => {
									let arr = JSON.parse(rex.data)
									that.images = arr.fileName
								})
								.catch((e) => {});
						}
					}
				})
			},
			upImages() {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						that.$upShop('upload', res.tempFilePaths[0]).then(rex => {
							let arr = JSON.parse(rex.data)
							that.imagex = arr.fileName
						}).catch((e) => {});
					}
				})
			},
			changes(e) {
				console.log(e, '--------')
			},
			getAddressInfo() {
				this.$httpapi('/api/getAddressInfo', 'POST', {
					id: this.id
				}).then(res => {
					this.defaults = res.data.defaultFlag
					this.area = res.data.area
					this.city = res.data.city
					this.address = res.data.address
					this.name = res.data.name
					this.mobile = res.data.phone
					this.shengzheng = res.data.images
					this.shengfan = res.data.imagex
					this.province = res.data.province
					this.citys[this.province, this.city, this.area]
				})
			},
			bindPickerChange(e) {
				console.log(e, '---------')
				this.province = e.detail.value[0]
				this.city = e.detail.value[1]
				this.area = e.detail.value[2]
			},
			addressXuan() {
				var that = this
				uni.chooseLocation({
					success: (data) => {
						that.address = data.name;
					}
				})
			},
			loads() {
				this.$httpapi('rate', 'POST', {}).then(res => {
					this.rate = res.data.rate
					this.content = res.data.content.replace(/\<img/gi,
						'<img style="max-width:100%; display: block;"');
				})
				this.$httpapi('selectuserinfo', 'POST', {}).then(res => {
					this.money = res.data.money
				})
			},

			// 上传人像面图片的方法
			/* 	upImage() {
					var that = this;
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success: function(res) {
							that.images = res.tempFilePaths[0];
						}
					});
				},

				// 上传国徽面图片的方法
				upImages() {
					var that = this;
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success: function(res) {
							that.imagex = res.tempFilePaths[0];
						}
					});
				}, */
			submitRealNameAuth() {
				if (!this.name) {
					uni.showToast({
						title: '请输入真实姓名',
						duration: 1500,
						icon: 'none'
					});
					return;
				}
				if (!this.mobile) {
					uni.showToast({
						title: '请输入身份证号',
						duration: 1500,
						icon: 'none'
					});
					return;
				}
				// 检查是否上传了身份证人像面和国徽面图片
				if (!this.images || !this.imagex) {
					uni.showToast({
						title: '请上传身份证人像面和国徽面',
						duration: 1500,
						icon: 'none'
					});
					return;
				}
				let mobileRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}X$)/;
				if (!mobileRegex.test(this.mobile)) {
					uni.showToast({
						title: '身份证号格式不正确',
						duration: 1500,
						icon: 'none'
					});
					return;
				}
				this.$httpapi('shiming', 'POST', {
					name: this.name,
					idcard: this.mobile,
					shengzheng: this.images,
					shengfan: this.imagex,

				}).then(res => {
					if (res && res.code === 200) {
						uni.showToast({
							title: '实名认证提交成功',
							duration: 1500,
							icon: 'none'
						});
						// 延迟1.5秒后跳转，等待提示信息消失
						setTimeout(() => {
							uni.navigateBack()
						}, 1500);
					} else {
						uni.showToast({
							title: '实名认证提交失败',
							duration: 1500,
							icon: 'none'
						});
					}
				}).catch(error => {
					console.error('实名认证提交失败:', error);
					uni.showToast({
						title: '请求失败，请稍后重试',
						duration: 1500,
						icon: 'none'
					});
				});
			},

			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FA;
	}

	.container {
		color: #333333;

		.postx {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999999;
		}

		input::placeholder {
			color: #999999;
			font-size: 28rpx;
			/* rpx 是微信小程序的相对单位 */
		}
		.input-field::placeholder {
		    color: #999999;
		    font-size: 28rpx; /* 使用 rpx 作为单位 */
		  }

		.buttons {
			margin: 100rpx auto 0;
			text-align: center;
			width: 710rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #2089FF 0%, #11ACEF 100%);
			border-radius: 44rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 88rpx;
		}
	}
</style>
